<template>
  <div class="image-outline">
    <!--  -->
    <ImageRectOutline v-if="clipShape.type === 'rect'" :width="elementInfo.width" :height="elementInfo.height"
      :radius="clipShape.radius" :outline="elementInfo.outline" />
      <!-- 椭圆 -->
    <ImageEllipseOutline v-else-if="clipShape.type === 'ellipse'" :width="elementInfo.width" :height="elementInfo.height"
      :outline="elementInfo.outline" />
    <!-- 多边形 -->
    <ImagePolygonOutline v-else-if="clipShape.type === 'polygon'" :width="elementInfo.width" :height="elementInfo.height"
      :outline="elementInfo.outline" :createPath="clipShape.createPath" />
  </div>
</template>

<script setup lang="ts">
import { defineProps, PropType, computed } from 'vue'
import { PPTImageElement } from '@/types/slides'
import useClipImage from '../useClipImage'

import ImageRectOutline from './ImageRectOutline.vue'
import ImageEllipseOutline from './ImageEllipseOutline.vue'
import ImagePolygonOutline from './ImagePolygonOut.vue'

const props = defineProps({
  elementInfo: {
    type: Object as PropType<PPTImageElement>,
    required: true
  }
})

const clip = computed(() => props.elementInfo.clip)
const { clipShape } = useClipImage(clip)
</script>